<template>
  <div>
    <MyBar>
      <div v-if="title" mr font-bold style="color: var(--color-content)">{{ title }}</div>
      <MyAction @click="addVar" v-if="!noAdd">新建</MyAction>
    </MyBar>
    <VueDraggable ref="el" :model-value="modelValue" @update="emit('update:modelValue', modelValue)" :animation="150" handle=".handle" target="tbody">
      <table class="my-table my-globals-table">
        <thead>
          <tr>
            <th>#</th>
            <th>名称</th>
            <th>类型</th>
            <th v-if="!isReturn">{{ isVar ? '初始化' : '可选参数' }}</th>
            <th v-if="!isReturn">{{ isVar ? '初始值' : '默认值' }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(adaptor, index) in adaptors">
            <td class="handle">
              <div>{{ index + 1 }}</div>
            </td>
            <td style="padding: 0;">
              <input type="text" class="my-input" v-model="adaptor.name" h8 lh8>
            </td>
            <td style="padding: 0;">
              <TypeSelect v-model="adaptor.type" />
            </td>
            <td v-if="!isReturn">
              <MyCheckBox :model-value="adaptor.value !== undefined" @update:model-value="changeInit(adaptor, $event)"/>
            </td>
            <td v-if="!isReturn">
              <VarInput v-if="adaptor.value !== undefined" v-model:varlike="adaptors[index].varlike" />
              <div v-else>-</div>
            </td>
            <ContextMenu title="函数" :context="adaptor" :menu-items="[
              {
                icon: ElIconDelete,
                title: '删除',
                action: (c) => {
                  removeVar(c)
                  return true
                }
              },
            ]" />
          </tr>
        </tbody>
      </table>
      <div v-if="adaptors.length === 0" style="background: var(--bg-content)" text-center p4>空</div>
    </VueDraggable>
  </div>
</template>

<script setup lang="ts">
import { VueDraggable, type UseDraggableReturn } from 'vue-draggable-plus'
import { VarInit } from "~/models/data/var_init";
import { ISlot } from '~/models/graph/slot/instance';
import { PSlot } from '~/models/graph/slot/prototype';
import { PSlotType } from '~/models/graph/slot/type';
import { tNum } from '~/models/types';
import { VarlikeAdaptor, type Varlike } from '~/models/varlike';

const props = defineProps<{
  modelValue: Varlike[],
  namespace: string,
  type: ('VarInit' | 'ISlotin' | 'PSlotin' | 'ISlotout' | 'PSlotout')
  title?: string
  noAdd?: boolean
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', event: Varlike[]): void,
}>()

const isVar = computed(() => props.type === 'VarInit')
const isParam = computed(() => ['ISlotin', 'PSlotin'].includes(props.type))
const isReturn = computed(() => ['ISlotout', 'PSlotout'].includes(props.type))

const el = ref<UseDraggableReturn>()

const adaptors = computed(() => props.modelValue.map(x => new VarlikeAdaptor(x)))

function addVar() {
  const name = uniqueNaming(props.namespace, adaptors.value.map(x => x.name))
  const type = tNum
  
  let newVarlike: Varlike;
  if (['ISlotin', 'PSlotin'].includes(props.type)) {
    newVarlike = new PSlot(name, name, 'in', PSlotType.Data, type)
    if (props.type === 'ISlotin') {
      newVarlike = new ISlot(newVarlike)
    }
  }
  else if (['ISlotout', 'PSlotout'].includes(props.type)) {
    newVarlike = new PSlot(name, name, 'out', PSlotType.Data, type)
    if (props.type === 'ISlotout') {
      newVarlike = new ISlot(newVarlike)
    }
  }
  else { newVarlike = new VarInit(name)}
  
  console.log('newVarlike', newVarlike);
  
  props.modelValue.push(newVarlike)
  emit('update:modelValue', props.modelValue)
}

function removeVar(a: VarlikeAdaptor) {
  remove(props.modelValue, x => x === a.varlike)
  emit('update:modelValue', props.modelValue)
}

function changeInit(a: VarlikeAdaptor, value: boolean) {
  // console.log(`change to ${value}`);

  if (value) {
    // console.log('gvar', gvar);
    // console.log('gvar.initial', gvar.initial);
    // console.log(`set gvar.initial to ${gvar.type.default}`);
    a.value = a.type.default
    // console.log('gvar', gvar);
    // console.log('gvar.initial', gvar.initial);
  }
  else {
    // console.log(`set global.initial to undefined`);
    a.value = undefined
  }
}
</script>

<style lang="scss" scoped>
.my-globals-table {
  
  tr {
    :is(th, td) {
      vertical-align: top;
      text-align: left;
      padding-left: 0.5rem;
      &:nth-child(1) {
        padding: 0;
        width: 2rem;
        text-align: center;
      }
      &:nth-child(2) {
        width: 10rem;
        input {
          width: 100%;
        }
      }
      &:nth-child(3) {
        width: 10rem;
      }
      &:nth-child(4) {
        width: 5rem;
      }
      &:nth-child(5) {
        padding: 0;
        width: auto;
      }
    }
  }
}
</style>